<style scoped>
.el-card{border-radius: 10px;width: 100%;margin-bottom: 10px;}
.count_outer{flex-wrap: wrap;}
.count_outer li{border: 01px solid var(--sm_main);border-radius: 10px;margin: 10px;width: auto;min-width: 160px;padding: 10px;text-align: center;}
.count_outer li>b{display: block;font-size: 2em;}

</style>
<template>
  <div style="width: 100%;height: 100%;overflow-y: auto;">
    <el-card v-if="can.user_num">
      <template #header>统计总览</template>
      <ul class="flex count_outer">
        <template v-for="row in count_list">
          <el-tooltip v-if="row.show" :content="row.tips" placement="top">
            <li @click="row.onclick" :style="{cursor:typeof row.onclick=='function' ? 'pointer' : 'default' }" >
              <p>{{row.content}}</p>
              <b class="text-ellipsis">{{row.value}}</b>
            </li>
          </el-tooltip>
        </template>
      </ul>
    </el-card>
    <el-card v-if="can.user_num">
      <template #header>
        <div class="flex" style="justify-content: space-between">
          <p>新用户量</p>
          <el-radio-group v-model="user_num.time" size="small">
            <el-radio-button value="30天">30天内</el-radio-button>
            <el-radio-button value="6月">6月内</el-radio-button>
            <el-radio-button value="3年">3年内</el-radio-button>
          </el-radio-group>
        </div>
      </template>
      <chart style="height: 400px" :datasets="user_num.datasets" :labels="user_num.labels" :options="user_num.options"></chart>
    </el-card>

    <el-card v-if="can.pay_money">
      <template #header>
        <div class="flex" style="justify-content: space-between">
          <p>订单收益</p>
          <el-radio-group v-model="pay_money.time" size="small">
            <el-radio-button value="30天">30天内</el-radio-button>
            <el-radio-button value="6月">6月内</el-radio-button>
            <el-radio-button value="3年">3年内</el-radio-button>
          </el-radio-group>
        </div>
      </template>
      <chart style="height: 400px" :datasets="pay_money.datasets" :labels="pay_money.labels" :options="pay_money.options"></chart>
    </el-card>
  </div>

</template>
<script>
import {href_handle, in_right_admin} from "@/js/tool.js";
import chart from "@/components/chart.vue";

export default {
  components: {chart},
  props: ['__iframe'],
  data(){
    let app = this;
    return {
      can: {
        count: in_right_admin('Count/count'),
        pay_money: in_right_admin('Count/pay_money'),
        user_num: in_right_admin('Count/user_num'),
      },
      count_list: {
        pay_money:{content:'总支付', tips:'系统内发生的所有`支付行为`的总金额', value:0},
        refund_money:{content:'总退款', tips:'系统内发生的所有`支付后退款`(退款成功)的总金额', value:0},
        kickback:{content:'总佣金', tips:'系统内产生的佣金(`待入账`和`已入账`，不包含已退回的)的总额', value:0, onclick:function(){ href_handle('/count/user_kickback_withdraw') }},
        get_money:{content:'预计收益', tips:'`总支付`-`总退款`-`总佣金`。表示系统支付了佣金后，预计剩余的收益', value:0},
        over_money:{content:'总成交', tips:'系统内发生的所有`已成交订单`的累计支付金额', value:0},
        refund_apply:{content:'申请退款', tips:'申请退款的订单数量', value:0},
        need_deliver:{content:'待发货', tips:'待发货的订单数量', value:0},
        user_num:{content:'总用户', tips:'已注册用户(注销的除外)数量', value:0, onclick:function(){ href_handle('/user/index') }},
        all_user_money:{content:'用户总可用余额', tips:'系统内所有用户(注销的除外)的剩余余额的总和', value:0, onclick:function(){ href_handle('/user/index') }},
        all_user_money_pay:{content:'用户总消费余额', tips:'系统内所有`支付行为`(不包含已退款)消费的余额的总和', value:0 },
      },
      user_num: {
        time: '30天',
        labels: [],
        datasets: {
          label: '用户量',
          data: [],
          fill: true,
        },
        options: {
          tooltip: {
            trigger: "axis",
          },
          yAxis: {
            name: "人数（个）",
          },
          toolbox: {
            show: true,
            feature: {
              magicType: { show: true, type: ["bar", "line"] },
            },
          },
        },
      },
      pay_money: {
        time: '30天',
        labels: [],
        datasets: {
          label: '订单收益',
          data: [],
          fill: true,
        },
        options: {
          tooltip: {
            trigger: "axis",
          },
          yAxis: {
            name: "金额（元）",
          },
          toolbox: {
            show: true,
            feature: {
              magicType: { show: true, type: ["bar", "line"] },
            },
          },
        },
      },
    }
  },
  methods: {
    chart_data(key, time){
      let app = this;
      let ms = time.match(/^(\d+)(年|月|天)$/);
      if (!ms) return;
      let now = new Date();
      let now_map = {
        y: now.getFullYear(),
        m: now.getMonth()+1,
        d: now.getDay()+1,
        t: now.getTime(),
      }
      let labels = [];
      let data = [];
      for (let i = 0; i < ms[1]; i++) {
        switch (ms[2]) {
          case '天':{
            labels.push(s94Mjs.date('Y-M-D', now_map.t - i*3600*24*1000));
          }break;
          case '月':{
            labels.push(now_map.y+'-'+(now_map.m<10 ? '0'+now_map.m : now_map.m))
            if (--now_map.m < 1){
              now_map.m = 12;now_map.y--;
            }
          }break;
          case '年':{
            labels.push(now_map.y--);
          }
        }
      }
      labels.reverse();
      ajax({url: '/admin/count/'+key+'?time='+time, cache:true, loading:true}, function(res){
        s94Mjs.each(labels, function(k){
          data.push( res.data[k] || 0 );
        })
        if (ms[2]=='天'){
          labels.forEach((v, i)=>{
            labels[i] = v.substring(5);
          })
        }
        app[key]['labels'] = labels;
        app[key]['datasets']['data'] = data;
        return false;
      })
    },
  },
  watch:{
    'user_num.time'(v,oldV){
      if (v!=oldV) this.chart_data('user_num', v);
    },
    'pay_money.time'(v,oldV){
      if (v!=oldV) this.chart_data('pay_money', v);
    },
  },
  mounted() {
    let app = this;
    if (!this.__iframe) window['app'] = this;

    this.can.count && ajax({url:'/admin/count/index', cache:true},function(res){
      Object.keys(app.count_list).forEach(k=>{
        let row = app.count_list[k];
        row.show = (k in res.data);
        if (row.show){
          row.value = res.data[k];
        }
      })
      return false;
    })
    this.can.user_num && this.chart_data('user_num',this.user_num.time);
    this.can.pay_money && this.chart_data('pay_money',this.user_num.time);
  }
}
</script>
